<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <!-- 默认显示图标 -->
      <svg-icon style="color: #fff; font-size: 20px" icon-class="language" />
    </div>
    <!-- 下拉菜单内容 -->
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">
        中文
      </el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en' === $i18n.locale">
        en
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import cookie from 'js-cookie'
export default {
  name: 'Lang',
  methods: {
    changeLanguage (command) {
      // 动态切换多语言 => 点击可以获取对应菜单项上绑定的 command="zh" 的值
      console.log('command:', command)
      // 切换多语言 => 核心: 用locale切换
      this.$i18n.locale = command // 设置给本地的i18n插件
      // 本地持久化存储当前语言标识
      /**
       * 语法: cookie.set(key,value,{expires: day/date对象})
       * 默认存储的是session形式 => 关闭浏览器数据会被删除
       */
      cookie.set('hr-lang', command)
      // cookie存储测试
      // expires 传数字代表几天后过期
      // cookie.set('hr-test', 123, { expires: 3 })
      // expires 传date对象 可以指定的更加精细，如: 三小时后过期
      cookie.set('hr-test', 123, { expires: new Date(Date.now() + 3 * 60 * 60 * 1000) })
      // 如果想要看真实时间的话在控制台输出new Date('expires中的字段')，记得要加引号
      // new Date('2021-07-18T10:21:06.000Z')   // Sun Jul 18 2021 18: 21: 06 GMT + 0800(中国标准时间)
      const lang = command === 'zh' ? '中文' : '英文'
      this.$message.success(`成功将语言切换成${lang}`)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
